<template>
  <div class="box-border p-12px">
    <el-tabs v-model="tabName" class="demo-tabs">
      <el-tab-pane label="字段变更" name="column">
        <ColumnChange :params="props.params" />
      </el-tab-pane>
      <el-tab-pane label="表变更" name="table">
        <TableChange :params="props.params" />
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-button @click="closeOutDrawer">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import ColumnChange from './ColumnChange.vue'
import TableChange from './TableChange.vue'
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})

const tabName = ref('column')
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
